<template>
  <div>
    <el-form :inline="true" ref="queryRef" :model="queryParams" class="demo-form-inline">
      <el-form-item v-for="item in searchList" :label="item.label" :prop="item.key" label-width="100px">
        <template v-if="item.type === 'month'">
          <el-date-picker v-model="queryParams[item.key]" type="month" value-format="YYYY-MM" @change="handleQuery"
            placeholder="请选择" style="width: 192px;" />

        </template>
        <template v-else>
          <el-input v-model="queryParams[item.key]" clearable placeholder="请输入" @keyup.enter="handleQuery"
            style="width: 192px;" />

        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>

      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="js">
import { ref } from 'vue';
import columnJson from '../fields/searchForm.json'
//获取表格json数据
const { common } = columnJson
//获取路由参数
const props = defineProps(['redgerType'])
const currentRedgerType = props.redgerType
const { proxy } = getCurrentInstance();

// 将json转换为值为空
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  redgerType: currentRedgerType
})
const searchList = Object.entries(common).map(([key, value]) => ({
  key: key,
  label: value.label,
  type: value.type
}));

//查询列表
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  proxy.$bus.emit('RefreshlLedger', queryParams.value)
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
</script>
<style scoped></style>
